<style lang="scss" scoped>
  @import '@/assets/css/variable';
  .my-text{
    width: 100%;
    position: relative;
    textarea{
      width: 100%;
      height: 180px;
      border: 1px solid $border-c-l;
      border-radius: 0.6rem;
      box-sizing: border-box;
    }
    .close-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: -0.7rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .down-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: 4rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .up-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: 8rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
  }
</style>

<template>
  <div class="my-text">
    <span class="close-icon" :style="{backgroundColor:mainColor}" @click="deleteBtn"><van-icon color="white" name="cross" /></span>
    <span class="down-icon" :style="{backgroundColor:mainColor}"><van-icon color="white" name="arrow-down" @click="downBtn"/></span>
    <span class="up-icon" :style="{backgroundColor:mainColor}"><van-icon color="white" name="arrow-up"  @click="upBtn"/></span>
    <quill-editor
      v-model="content"
      ref="myQuillEditor" 
      :options="editorOption"
      @change="onEditorChange($event)">
    </quill-editor>
    <!-- <vue-html5-editor :height="400" placeholder="请填写文字或符号" @change="editorChange"></vue-html5-editor> -->
    <!-- <textarea class="padding-all" v-model="value"></textarea> -->
    <!-- <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap> -->
  </div>
</template> 
<script>
// import VueUeditorWrap from 'vue-ueditor-wrap';
import { Icon } from 'vant';
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];
//注册子组件
export default {
  name: "MyText",
  components: {
    [Icon.name]: Icon,
    quillEditor
  },
  props: {
    editorHtml: String,
    id: Number,
    index: Number
  },
  computed: {

  },
  data() {
    return {
      mainColor: "#FF0000",
      content: "",
      editorOption: {
        placeholder: "请在这里输入内容",
        modules: {
          toolbar: toolbarOptions
        }
      }
    }
  },
  created () {
    const _this = this;
    const mainColor = _this.$store.getters.getMainColor;
    if(mainColor){
      _this.mainColor = mainColor;
    }else{
      //调用接口获取mainColor
    }
    // 把父组件传来得值赋值给content,通过修改content来把修改后的content传递给父组件
    this.content = this.editorHtml;
    //const caseList = _this.$store.getters.getCaseTabsList;
  },
  methods: {
    upBtn() {
      this.$emit("upIntroduceItem", this.index)
    },
    downBtn() {
      this.$emit("downIntroduceItem", this.index)
    },
    deleteBtn() {
      console.log("id", this.id)
      this.$emit("deleteIntroduceItem", this.id)
    },
    onEditorChange(value) {
      const item = {
        id: this.id,
        value: value.html
      }
      this.$emit("editorHtmlChange", item)
    }
  }
};
</script>
